<template>
   <div class="home">
       <headerTou  title="天天咖啡" :isfanhui=true url='My'></headerTou>  
       <div class="neirong"  >
           <div v-for=" (item,i) in sumdata" :key=item.background  class="juzhong " :class="{index:i==is}" >
             <car  :data=item  @click.stop></car>  
         </div>
       </div>
   </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import car from "./zujian/car.vue";
var $ = require("jquery");
export default {
  data() {
    return {
      data: "",
      data1: "",
      data2: "",
      data3: "",
      sumdata: [], //测试数据,
      is: -99
    };
  },
  created() {
    this.data = {
      src: "../img/logo@3x.png",
      biaoti: "冰火九重天洗车",
      qianshu: "5000",
      background:
        "background-image: linear-gradient(-94deg, #884acc 0%, #c273cf 100%)"
    };
    this.data1 = {
      src: "../img/logo@3x.png",
      biaoti: "冰火九重天洗车",
      qianshu: "5000",
      background:
        "background-image: linear-gradient(-94deg, #f2f1f1 0%, #bbb5b2 100%);"
    };
    this.data2 = {
      src: "../img/logo@3x.png",
      biaoti: "冰火九重天洗车",
      qianshu: "5000",
      background:
        "  background-image: linear-gradient(-94deg, #fad961 0%, #fad961 100%);"
    };
    this.data3 = {
      src: "../img/logo@3x.png",
      biaoti: "冰火九重天洗车",
      qianshu: "5000",
      background:
        " background-image: linear-gradient(-94deg, #ec6c99 0%, #fe7d84 100%);"
    };
    this.sumdata.push(this.data, this.data1, this.data2, this.data3);
  },
  mounted() {},
  methods: {},
  components: {
    headerTou,
    car
  }
};
</script>
<style scoped lang="scss">
.home {
  .neirong {
    margin-top: 28px;
    width: 100%;
    position: relative;
    .div1 {
      width: 660px;
      border-radius: 10px;

      margin: 0 auto;
    }

    .juzhong {
      width: 660px;
      border-radius: 10px;

      margin:10px auto;
    }
  }
}
</style>